<template>
	<view class="search">
		<view class="search_form">
			<u-search placeholder="请输入关键词" shape="square" v-model="name" @search="searchCar(name,true)" @custom="searchCar(name,true)"></u-search>
		</view>
		<view class="hot">
			<view class="search_title ">
				<view class="title">
					热门搜索
				</view>
				<view>
				</view>
			</view>
			<view class="histroy ">
				<view class="histroy-item" v-for="item in hotList" :key="item.history_id" @click="searchCar(item.content)">
					{{item.content}}
				</view>
			</view>
		</view>
		<u-modal :show="isConfirm" content="你确定要删除所有历史记录吗?" :closeOnClickOverlay="true" :showCancelButton="true"
			@cancel="isConfirm=false" @close="isConfirm=false" @confirm="delHistory">
		</u-modal>
	</view>
</template>

<script>
	import {get_history,add_history,del_history} from '@/api/contents/history/history'
	export default {
		data() {
			return {
				isConfirm:false,
				name: '',
				historyList: [],
				hotList: [{
					history_id: 1,
					content: '奔驰'
				}, {
					history_id: 2,
					content: '宝马'
				}, {
					history_id: 3,
					content: '本田'
				}, {
					history_id: 4,
					content: '奥迪'
				}, {
					history_id: 5,
					content: '劳斯莱斯'
				}, {
					history_id: 6,
					content: '阿斯顿'
				}, {
					history_id: 7,
					content: '买新车，app'
				}, {
					history_id: 8,
					content: '新能源汽车'
				}, {
					history_id: 9,
					content: '最贵的汽车是什么'
				}, {
					history_id: 10,
					content: '买新车，就上小羊买车app'
				}, ]
			};
		},
		methods:{
			searchCar(name){
				uni.navigateTo({
					url:'../searchCarList/searchCarList?name='+name
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		padding: 0 30upx;

		.search_form {
			padding: 30upx 0;
		}

		.search_title {
			font-size: 28upx;
			font-weight: 400;
			color: #666666;
			display: flex;
			justify-content: space-between;
		}

		.histroy {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.histroy-item {
				padding: 15upx 0;
				width: 40%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 30upx;
				font-weight: 400;
				text-align: left;
				color: #333333;
			}
		}
		.history_noData{
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
				font-size: 30upx;
				font-weight: 400;
				text-align: left;
				color: #333333;
		}

		.hot {
			margin-top: 30upx;
		}
	}
</style>
